<template>
  <div class="app-container app-container-next app-container-detail">
    <div slot="header" class="back">
      <router-link :to="{name: 'tools-list'}">
        <el-button plain icon="el-icon-back" size="small" :round="true">
          返回
        </el-button>
      </router-link>
    </div>
    <el-card class="box-card site" shadow="false">
      <el-row style="margin-top: 20px">
        <el-col :span="24">
          <el-form ref="settingForm" :model="settings" label-width="800px" label-position="top">
            <h4 class="rebate-label">Facebook网域验证</h4>
            <el-form-item label="输入Facebook网域验证代码进行网域验证" prop="name">
            </el-form-item>
            <el-form-item label="插入代码" prop="name">
              <el-input
                  type="textarea"
                  :autosize="{ minRows: 4, maxRows: 6}"
                  placeholder="请输入代码"
                  v-model="settings.sourceContent"
                  style="width:670px"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleSubmit" :loading="submitLoading">保存</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import axios from 'axios';
import {addAppFbDomain, getAppFbDomain} from '@/api/app-market';
import {mapGetters} from 'vuex';

export default {
    name: 'fb-domain',
    data () {
        return {
            submitLoading: false,
            settings: {
                id: '',
                sourceContent: '',
                content: ''
            }
        };
    },
    methods: {
        getAppFbDomain () {
            getAppFbDomain(this.siteId).then((res) => {
                if (res.data) {
                    this.settings = res.data;
                }
            });
        },
        handleSubmit () {
            this.submitLoading = true;
            this.settings.siteId = this.siteId;
            let bindValue = this.settings.sourceContent.match(/(?<=content=").*?(?=")/);
            this.settings.content = (bindValue && bindValue[0]) || '';
            addAppFbDomain(this.settings).then(res => {
                if (res.code === '200') {
                    this.submitLoading = false;
                    this.$message.success('保存成功');
                    this.$store.dispatch('CLEAR_FRONT_CACHE');
                    this.$router.push({name: 'tools-list'});
                }
            }).catch(() => {
                this.submitLoading = false;
            });
        }
    },
    mounted () {
        this.getAppFbDomain();
    },
    computed: {
        ...mapGetters(['siteList']),
        siteInfo () {
            let info = this.siteList.find(res => res.id === Number(this.siteId));
            return info;
        },
        siteId () {
            return this.$store.state.user.siteId;
        }
    }
};
</script>

<style scoped lang="scss">
.no-down {
  ::v-deep .el-input__suffix {
    display: none;
  }

  ::v-deep .el-select-dropdown {
    display: none;
  }
}
</style>
